<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title> 检测服务系统 </title>
    <!--layui样式-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>
    <!--公用样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
    <!--页面样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/style.css"/>
    <!--扩展样式-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/common/css/extended.css">
    <script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.js" charset="utf-8"></script>

</head>

<style>
    .tab_menu {
        width: 150px;
        line-height: 25px;
        background: #FFFFFF;
        position: absolute;
        box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 25%);
        font-size: 14px;
        text-align: center;
        padding: 0;
        z-index: 1000;
    }

    .tab_menu ul {
        width: 100%;
        line-height: 25px;
    }

    /*.tab_menu ul li:hover {*/
    /*    background: rgba(0 0 0 / 25%)*/
    /*}*/
</style>


<body>
<!--头部-->
<header class="whitebg">
    <div class="clearfix">
        <a href="/main"><img src="${re.contextPath}/plugin/common/images/2@2x.png" class="logo fl" alt=""/></a>
        <div class="mineData fr clearfix mt10">
            <#--            <img src="${re.contextPath}/plugin/common/images/29@2x.png" alt="" class="fl"/>-->
            <#if "${file}" !="${null}" && (file.xgtx) != "${null}">
                <img class="ml10" src="${file.xgtx}" alt="" id="mainimg7">
            <#else>
                <#if "${user}" !="${null}" && (user.personType) == "002">
                    <img class="layui-upload-img ml10" id="mainimg7" src="/plugin/common/images/zzlogo.jpg">
                <#else>
                    <img class="layui-upload-img ml10" id="mainimg7"
                         src="${re.contextPath}/plugin/common/images/29@2x.png">
                </#if>
            </#if>
            <nav class="fl ml10">
                <p class="fr18"><#assign currentUser = Session["currentPrincipal"]>
                    <#--<img src="${re.contextPath}/images/${currentUser.photo}" class="layui-nav-img">-->
                    ${currentUser.username}</p>
                <p class="gary"><a href="${re.contextPath}/logout"><i class="fa fa-sign-out" aria-hidden="true"></i> 退出</a>
                </p>
            </nav>
        </div>
    </div>
    <div class="column bluebg white clearfix" style="padding: 3px 0 0;">
        <div style="display: inline-block;width: 13%;padding-left: 15px;padding-bottom: 0;margin-top: 6px;margin-bottom: -7px">
            <img src="${re.contextPath}/plugin/common/images/45@2x.png" alt="" class=" moduleIcon"
                 style="width: 30px;height: 30px;float: left">
            <span class="ft16" style="float: left">检测服务系统</span>
        </div>
        <div class="tab_list" style="display: inline-block;width: 86%;overflow: hidden">
            <div id="lt-arrow"><img id="left" class="arrow" src="${re.contextPath}/plugin/common/images/lt-arrow.png">
            </div>
            <ul id="ul_jl_tabs" class="ft14 clearfix  ml50" style="display: flex;margin-left: 0;left:43px;"></ul>
            <div id="rt-arrow"><img id="right" class="arrow" src="${re.contextPath}/plugin/common/images/rt-arrow.png">
            </div>
        </div>
    </div>
    <div class="tab_menu" id="tab_menu">
        <ul>
            <li class="list closeother">关闭其他标签</li>
            <li class="list closeall">关闭所有标签</li>
        </ul>
    </div>
</header>
<!--容器-->
<div class="container clearfix">
    <!--占位-->
    <div class="headerHightAdd"></div>
    <!--左侧菜单栏-->
    <div class="Left fl">
        <ul class="white mt10" id="project">
            <#list menu as item>
                <#if item.systemType == 5>
                    <#list item.children as child>
                        <a href="javascript:void(0);" id="${child.id}" lay-ay="${child.url}">
                            <li class="clearfix focus">
                                <img src="${re.contextPath}/plugin/common/images/${child.icon}.png" alt=""
                                     class="fl icon"/>
                                <span class="fl">${child.name}</span>
                                <img src="${re.contextPath}/plugin/common/images/9@2x.png" alt="" class="fr next"/>
                            </li>
                        </a>
                    </#list>
                </#if>
            </#list>
        </ul>
    </div>
    <!--右侧内容-->
    <div id="ul_jl_tabs_content" class="Right fr fixRight"
         style="width:86vw;left: 14%;height: calc(100vh - 132px);"></div>
</div>
<!--JQ-->
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/jquery-1.8.3.min.js"></script>
<!--公用样式JS-->
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/comment.js"></script>
<!--选择城市js-->
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/area.js"></script>
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/select.js"></script>
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/tabs.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>

<script>
    document.oncontextmenu = function () {
        return false;
    }
    document.onmousedown = function (event) {
        // console.log(event)
        if (event.which === 1) {
            // console.log('yes')
            // $('.tab_menu').hide()
        }
    }
    $('.tab_menu').hide()
</script>
<script>
    // document.oncontextmenu = function(e) {
    //     console.log(e);
    //     // return false;
    // }
    layui.use('layer', function () {
        var layer = layui.layer;
    });
    $(function () {
        $("#project a").click(function () {
            var that = $(this);
            that.parent().find('li').removeClass('focus');
            that.find('li').addClass('focus');
            _showtab(that.attr('id'), that.find('span').text(), that.attr("lay-ay"));
        });
        $(".Right").css({
            top: $(".headerHightAdd").height() + 'px',
        });


        var _tags = '${currentUser.tags}';
        if (_tags) {
            // 先根据参数查询是否是当前系统的项目
            layerAjaxGet('/jc/projectManager/isParamSys',{"temp":_tags},'',function (res){
                if (res){
                    var _ytags = res.split(";");
                    var _a = _ytags.length;
                    for (var i = 0; i < _a; i++) {
                        var _b = _ytags[i];
                        if (_b) {
                            var _c = _b.split(":");
                            _showtab('xm_v' + _c[0], '查看-' + _c[1], '/jc/projectManager/projectDetail?type=v&id=' + _c[0]);
                        }
                    }
                }
            })
        }
        $("#project a:eq(0)").click();
    })
    $(document).ready(function () {
        var lt = $("#lt-arrow").offset().left;
        var ltw = $("#lt-arrow").width();
        var rt = $("#rt-arrow").offset().left;
        var distances = rt - (lt + ltw);
        $("#lt-arrow").click(function () {
            var _apst = $("#ul_jl_tabs");
            var ulwidth = _apst.width();
            var ltul = _apst.offset().left
            var ult = lt + ltw - 2
            if (ulwidth > distances && ltul < ult) {
                _apst.css({left: (_apst.position().left + 40) + "px"});
            }
        })
        $("#rt-arrow").click(function () {
            var _apst = $("#ul_jl_tabs");
            var ulwidth = _apst.width();
            var ulleft = _apst.offset().left
            var widthadd = ulleft + ulwidth
            if (ulwidth > distances && widthadd > rt) {
                _apst.css({left: (_apst.position().left - 40) + "px"});
            }
        })
    })

    var tabid;

    $('#ul_jl_tabs').on("mousemove", 'li', function (event) {
        var that = $(this);
        if (event.offsetX > that.width() - 5 || event.offsetX < 5 || event.offsetY < 5 || event.offsetY > that.height() - 5) {
            $('.tab_menu').hide()
        }
    })

    $('#ul_jl_tabs').on("mousedown", 'li', function (event) {
        var that = $(this);
        tabid = that.attr('mid')
        console.log(event);
        if (event.which === 3) {
            $('.tab_menu').css({
                'top': event.clientY + 'px',
                'left': event.clientX + 'px',
            })
            _showTabByMid(tabid)
            $('.tab_menu').show()
        } else {
            $('.tab_menu').hide()
        }
    })

    $('#tab_menu').on("click", "ul .closeother", function () {
        console.log('other');
        var tablist = $('#ul_jl_tabs').find('li')
        for (var i = 0; i < tablist.length; i++) {
            var id = tablist[i].getAttribute('mid')
            console.log(id)
            if (id != tabid) {
                _delTab(id)
            }
        }
        $('.tab_menu').hide()
    })

    $('#tab_menu').on("click", "ul .closeall", function () {
        console.log('all');
        var tablist = $('#ul_jl_tabs').find('li')
        for (var i = 0; i < tablist.length; i++) {
            var id = tablist[i].getAttribute('mid')
            _delTab(id)
        }
        $('.tab_menu').hide()
    })

</script>
</body>
</html>
